<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      class="query-params-form"
    >
      <el-form-item label="单据名称" prop="documentName">
        <el-input
          v-model="queryParams.documentName"
          placeholder="请输入单据名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属实体名称" prop="entityName">
        <el-input
          v-model="queryParams.entityName"
          placeholder="请输入所属实体名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="字段名称" prop="fieldName">
        <el-input
          v-model="queryParams.fieldName"
          placeholder="请输入字段名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAddBarcodeFieldLine"
          >添加</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          @click="handleDeleteBarcodeFieldLine"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Document" @click="submitTable"
          >保存</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Close" @click="handleClose"
          >关闭</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      :data="fieldlineList"
      :row-class-name="rowBarcodeFieldLineIndex"
      @selection-change="handleFieldLineSelectionChange"
      ref="fieldLine"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="单据名称" prop="documentName" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.documentName" />
        </template>
      </el-table-column>
      <el-table-column label="单据标识" prop="documentIdentifier" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.documentIdentifier" />
        </template>
      </el-table-column>
      <el-table-column label="所属实体名称" prop="entityName" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.entityName" />
        </template>
      </el-table-column>
      <el-table-column label="所属实体标识" prop="entityIdentifier" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.entityIdentifier" />
        </template>
      </el-table-column>
      <el-table-column label="字段名称" prop="fieldName" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.fieldName" />
        </template>
      </el-table-column>
      <el-table-column label="字段标识" prop="fieldIdentifier" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.fieldIdentifier" />
        </template>
      </el-table-column>
      <el-table-column label="固定值" prop="fixedValue" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.fixedValue" />
        </template>
      </el-table-column>
      <el-table-column label="值转换规则" prop="valueConversionRule">
        <template #default="scope">
          <el-input
            v-model="scope.row.valueConversionRule"
            placeholder="请输入值转换规则"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改条码字段行对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form
        ref="fieldlineRef"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="头表ID" prop="headerId">
          <el-input v-model="form.headerId" placeholder="请输入头表ID" />
        </el-form-item>
        <el-form-item label="单据名称" prop="documentName">
          <el-input v-model="form.documentName" placeholder="请输入单据名称" />
        </el-form-item>
        <el-form-item label="单据标识" prop="documentIdentifier">
          <el-input
            v-model="form.documentIdentifier"
            placeholder="请输入单据标识"
          />
        </el-form-item>
        <el-form-item label="所属实体名称" prop="entityName">
          <el-input
            v-model="form.entityName"
            placeholder="请输入所属实体名称"
          />
        </el-form-item>
        <el-form-item label="所属实体标识" prop="entityIdentifier">
          <el-input
            v-model="form.entityIdentifier"
            placeholder="请输入所属实体标识"
          />
        </el-form-item>
        <el-form-item label="字段名称" prop="fieldName">
          <el-input v-model="form.fieldName" placeholder="请输入字段名称" />
        </el-form-item>
        <el-form-item label="字段标识" prop="fieldIdentifier">
          <el-input
            v-model="form.fieldIdentifier"
            placeholder="请输入字段标识"
          />
        </el-form-item>
        <el-form-item label="固定值" prop="fixedValue">
          <el-input v-model="form.fixedValue" placeholder="请输入固定值" />
        </el-form-item>
        <el-form-item label="值转换规则" prop="valueConversionRule">
          <el-input
            v-model="form.valueConversionRule"
            placeholder="请输入值转换规则"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Fieldline">
import {
  listFieldline,
  getFieldline,
  delFieldline,
  addFieldline,
  updateFieldline,
  saveFieldline,
} from "@/api/barcode/fieldline";

const { proxy } = getCurrentInstance();
const route = useRoute();

const fieldlineList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const checkedFieldLine = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    documentName: null,
    documentIdentifier: null,
    entityName: null,
    entityIdentifier: null,
    fieldName: null,
    fieldIdentifier: null,
  },
  rules: {
    id: [{ required: true, message: "ID不能为空", trigger: "blur" }],
    headerId: [{ required: true, message: "头表ID不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询条码字段行列表 */
function getList() {
  loading.value = true;
  queryParams.value.headerId = route.params && route.params.id;
  listFieldline(queryParams.value).then((response) => {
    fieldlineList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    headerId: null,
    documentName: null,
    documentIdentifier: null,
    entityName: null,
    entityIdentifier: null,
    fieldName: null,
    fieldIdentifier: null,
    fixedValue: null,
    valueConversionRule: null,
    createdBy: null,
    createdDate: null,
    modifiedBy: null,
    modifiedDate: null,
  };
  proxy.resetForm("fieldlineRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 返回按钮操作 */
function handleClose() {
  const obj = { path: "/barcode/field" };
  proxy.$tab.closeOpenPage(obj);
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加条码字段行";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getFieldline(_id).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "修改条码字段行";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["fieldlineRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateFieldline(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addFieldline(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除条码字段行编号为"' + _ids + '"的数据项？')
    .then(function () {
      return delFieldline(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 条码字段行添加按钮操作 */
function handleAddBarcodeFieldLine() {
  let obj = {};
  obj.id = -(fieldlineList.value.length + 1);
  obj.index = fieldlineList.value.length + 1;
  obj.documentName = "";
  obj.documentIdentifier = "";
  obj.entityName = "";
  obj.entityIdentifier = "";
  obj.fieldName = "";
  obj.fieldIdentifier = "";
  obj.fixedValue = "";
  obj.valueConversionRule = "";
  fieldlineList.value.push(obj);
}

/** 条码字段行删除按钮操作 */
function handleDeleteBarcodeFieldLine() {
  if (checkedFieldLine.value.length == 0) {
    proxy.$modal.msgError("请先选择要删除的条码字段行数据");
  } else {
    console.log("xxx", checkedFieldLine.value);
    const fieldLines = fieldlineList.value;
    const checkedFieldLines = checkedFieldLine.value;
    fieldlineList.value = fieldLines.filter(function (item) {
      return checkedFieldLines.indexOf(item.id) == -1;
    });
  }
}

/** 保存按钮 */
function submitTable() {
  const _hid = route.params && route.params.id;
  const _lineList = fieldlineList.value.map((item) => {
    return toRaw(item);
  });
  const _params = {
    id: _hid,
    lineList: _lineList,
  };
  console.log("_params", _params);
  saveFieldline(_params).then((response) => {
    proxy.$modal.msgSuccess("保存成功");
    open.value = false;
    getList();
  });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "barcode/fieldline/export",
    {
      ...queryParams.value,
    },
    `fieldline_${new Date().getTime()}.xlsx`
  );
}

/** 复选框选中数据 */
function handleFieldLineSelectionChange(selection) {
  checkedFieldLine.value = selection.map((item) => item.id);
}

getList();
</script>
